<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.prt{
			position: relative;
			height: 80px;
			background-color: lavender;
			margin-top: 10px;
		}
		
		.cld{
			width: 50px;
			height: 10px;
			background-color: black;
			position: absolute;
			/* float: left; */
			left: 0;
			top: 0;
			/* transition:ease 0.5s; */
			transition: all 0.2s ease-in-out 0s;
		}
		ul{
			float: left;
			margin-top: 10px;
			padding: 0;
			list-style: none;
			/* border: 1px solid; */
			background-color: yellow;
		}
		li{
			margin-right: 10px;
			float: left;		
			/* border: 1px solid; */
			text-align: center;
			display: inline-block;
			width: 50px;
			
			background-color: lightcoral;
		}
		ul li:nth-child(2):hover~.cld{
			left: 60px;
		}
		ul li:nth-child(3):hover~.cld{
			left: 120px;
		}
			
		span{
			border-top: 5px solid pink;
		}
	</style>
	<br>
	<span>1234</span>
	<br>
	<div class="prt">
		
		<ul>
			
			<li>1</li>
			<li class="no2">2</li>
			<li class="no3">3</li>
			<div class="cld"></div>
		</ul>
	</div>
	<embed src="media/video-play.06ec9738.mp3"  hidden="true" autostart="true" loop="true">
	<audio src="media/video-bgm.d8637316.mp3" id="aud" controls autoplay preload="auto" loop></audio>
	<bgsound src="media/video-bgm.d8637316.mp3" autostart=true loop=infinite>
	</body>
	<script>
		
	</script>
</html>